<template>
  <div id="interest">
    <!-- <app-Header title="注册绑定"></app-Header> -->
    <div class="interests-List">
      <grid>
        <grid-item v-for="(item, ikey) in imglist" :key="ikey" :bool="item.bool" @on-item-click="onItemClick(ikey)">
          <img slot="icon" :src="item.url1">
          <span >{{item.title}}</span>
        </grid-item>
      </grid>
    </div>
    <box gap="10px 10px">
      <x-button type="primary" @click.native="isShow">确定</x-button>
    </box>
  </div>
</template>

<i18n>
Grid:
  zh-CN: 九宫格
Go to Cell:
  zh-CN: 跳转到Cell
</i18n>

<script>
import AppMask from '../../components/mask/Mask'
import { Grid, GridItem, GroupTitle, XButton, Box } from 'vux'

let urlList1 = ['./static/images/01.png',
  './static/images/11.png',
  './static/images/21.png',
  './static/images/31.png',
  './static/images/41.png',
  './static/images/51.png',
  './static/images/61.png',
  './static/images/71.png',
  './static/images/81.png']
let urlList2 = ['./static/images/00.png',
  './static/images/10.png',
  './static/images/20.png',
  './static/images/30.png',
  './static/images/40.png',
  './static/images/50.png',
  './static/images/60.png',
  './static/images/70.png',
  './static/images/80.png']
const imglist = [
  {
    bool: true,
    url1: './static//images/00.png',
    title: '跑步'
  },
  {
    bool: true,
    url1: './static/images/10.png',
    title: '羽毛球'
  },
  {
    bool: true,
    url1: './static/images/20.png',
    title: '篮球'
  },
  {
    bool: true,
    url1: './static/images/30.png',
    title: '兵乓球'
  },
  {
    bool: true,
    url1: './static/images/40.png',
    title: '攀岩'
  },
  {
    bool: true,
    url1: './static/images/50.png',
    title: '足球'
  },
  {
    bool: true,
    url1: './static/images/60.png',
    title: '健身'
  },
  {
    bool: true,
    url1: './static/images/70.png',
    title: '瑜伽'
  },
  {
    bool: true,
    url1: './static/images/80.png',
    title: '网球'
  }
]
export default {
  name: 'interest',
  data () {
    return {
      urlList1: urlList1,
      urlList2: urlList2,
      imglist: imglist,
      interestList: []
    }
  },
  components: {
    Grid,
    GridItem,
    GroupTitle,
    XButton,
    Box,
    AppMask
    // AppHeader
  },
  methods: {
    onItemClick (ikey) {
      if (this.imglist[ikey].bool === false) {
        this.imglist[ikey].url1 = this.urlList2[ikey]
        this.imglist[ikey].bool = true
      } else {
        this.imglist[ikey].url1 = this.urlList1[ikey]
        this.imglist[ikey].bool = false
      }
      // console.log(this.imglist[ikey].bool)
      return this.imglist
    },
    isShow () {
      this.interestList.length = 0
      for (let i = 0; i < this.imglist.length; i++) {
        if (this.imglist[i].bool === false) {
          this.interestList.push(this.imglist[i].title)
        }
      }
      // console.log(this.interestList)
      return this.interestList
    }
  }
}
</script>

<style lang='less'>
@import "../../assets/less/interest/interest.less";
</style>
